<template>
  <view class="content">
		<view class="tag-section">
		  <text class="section-title">收藏的标签</text>
		  <view class="tag-grid">
		    <view class="tag-item" v-for="(tag, tagIndex) in starTag" 
				:key="tagIndex" @click="goToPage('/pages/display/display-1/display-1?tagId='+tag.id+'&tagName='+tag.name)">
		      {{ tag.name }}
		    </view>
		  </view>
		</view>
    <!-- 标签区容器 -->
    <view class="tag-section" v-for="(section, index) in tagSections" :key="index">
      <!-- 标签区标题 -->
      <text class="section-title">{{ section.title }}</text>
      
      <!-- 标签列表 - 使用grid布局 -->
      <view class="tag-grid">
        <view class="tag-item" v-for="(tag, tagIndex) in section.tags" :key="tagIndex" 
              @click="goToPage('/pages/display/display-1/display-1?tagId='+tag.id+'&tagName='+tag.name)">
          {{ tag.name }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { http } from '../../../utils/request'

// 获取标签列表
const tagSections = ref([])

const fetchTagList = async () => {
  uni.request({
    url: 'http://192.168.31.45:8080/api/tag/list',
    success: (res) => {
      if (res.data.code === 200) {
        const grouped = {}
        res.data.data.forEach(tag => {
          if (!grouped[tag.mainCategory]) {
            grouped[tag.mainCategory] = {
              title: tag.mainCategoryName,
              tags: []
            }
          }
          grouped[tag.mainCategory].tags.push({
            name: tag.subCategoryName,
            id: tag.tagId
          })
        })
        tagSections.value = Object.values(grouped)
      }
    },
    fail: (err) => {
      console.error('请求失败:', err)
    }
  })
}

const starTag =ref([])
// 页面加载时获取数据
onMounted(async() => {
  fetchTagList()
	try {
		const res = await http.get('/api/tag/favorite/list')
		console.log(res.data);
		starTag.value.push(...res.data.map(item=>{
			return{
				id: item.tagId,
				name: item.content
			}
		}))
	} catch (e) {
		console.log("获取用户收藏标签失败:",e);
	}
})
	
const goToPage = (url) => {
  if (!url) return
  uni.navigateTo({
    url
  })
}
</script>

<style>
.content {
  padding: 30rpx;
}

/* 标签区样式 */
.tag-section {
  margin-bottom: 50rpx;
  padding: 30rpx;
  background-color: #fafafa;
  border-radius: 20rpx;
}

/* 标签区标题样式 */
.section-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

/* 标签网格容器 */
.tag-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15rpx;
}

/* 单个标签项样式 */
.tag-item {
  background-color: #f5f5f5;
  border-radius: 10rpx;
  padding: 15rpx 10rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
}
</style>
